<template>
  <view class="ob-navbar" :style="navbarStyle">
    <!-- 状态栏占位 -->
    <view
      v-if="safeAreaInsetTop"
      class="ob-navbar__status-bar"
      :style="{ height: statusBarHeight + 'px' }"
    ></view>

    <!-- 导航栏内容 -->
    <view class="ob-navbar__content" :style="{ height: navHeight + 'px' }">
      <!-- 左侧内容 -->
      <view class="ob-navbar__left" @click="handleLeftClick">
        <slot name="left">
          <view v-if="showBack" class="ob-navbar__back">
            <text class="ob-navbar__back-icon">←</text>
            <text v-if="backText" class="ob-navbar__back-text">{{
              backText
            }}</text>
          </view>
        </slot>
      </view>

      <!-- 中间标题 -->
      <view class="ob-navbar__center">
        <slot name="center">
          <text v-if="title" class="ob-navbar__title" :style="titleStyle">{{
            title
          }}</text>
        </slot>
      </view>

      <!-- 右侧内容 -->
      <view class="ob-navbar__right" @click="handleRightClick">
        <slot name="right">
          <text v-if="rightText" class="ob-navbar__right-text">{{
            rightText
          }}</text>
        </slot>
      </view>
    </view>

    <!-- 分割线 -->
    <view v-if="border" class="ob-navbar__border"></view>
  </view>
</template>

<script setup>
import { computed, defineProps, defineEmits } from "vue";
import { getPlatform, getNavBarHeight } from "../../utils/common.js";

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "",
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  // 返回按钮文字
  backText: {
    type: String,
    default: "",
  },
  // 右侧文字
  rightText: {
    type: String,
    default: "",
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: "#FFFFFF",
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: "#000000",
  },
  // 是否显示底部边框
  border: {
    type: Boolean,
    default: true,
  },
  // 是否适配状态栏
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  // 导航栏高度（不含状态栏）
  height: {
    type: Number,
    default: 44,
  },
  // 是否固定定位
  fixed: {
    type: Boolean,
    default: true,
  },
  // z-index层级
  zIndex: {
    type: Number,
    default: 999,
  },
  // 是否阻止默认返回行为
  preventDefaultBack: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["left-click", "right-click"]);

// 获取系统信息
const platform = getPlatform();
const statusBarHeight = platform.statusBarHeight || 0;
const navHeight = props.height;

// 计算样式
const navbarStyle = computed(() => {
  const style = {
    backgroundColor: props.backgroundColor,
    zIndex: props.zIndex,
  };

  if (props.fixed) {
    style.position = "fixed";
    style.top = "0";
    style.left = "0";
    style.right = "0";
  }

  return style;
});

const titleStyle = computed(() => ({
  color: props.titleColor,
}));

// 事件处理
const handleLeftClick = () => {
  if (props.showBack) {
    // 发出事件，让父组件有机会处理
    emit("left-click");
    
    // 如果没有阻止默认行为，则执行默认返回逻辑
    if (!props.preventDefaultBack) {
      uni.navigateBack({
        fail: () => {
          // 获取当前页面路径来决定返回位置
          const pages = getCurrentPages();
          const currentPage = pages[pages.length - 1];
          const currentRoute = currentPage.route;
          
          // 如果是认证相关页面，返回登录页
          if (currentRoute.includes('auth/') && !currentRoute.includes('auth/login')) {
            uni.redirectTo({
              url: "/pages/auth/login",
            });
          } else {
            // 其他情况返回首页
            uni.reLaunch({
              url: "/pages/index/index",
            });
          }
        },
      });
    }
  }
};

const handleRightClick = () => {
  emit("right-click");
};
</script>

<style lang="scss" scoped>
.ob-navbar {
  background-color: #ffffff;

  &__status-bar {
    width: 100%;
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    position: relative;
  }

  &__left,
  &__right {
    min-width: 60px;
    display: flex;
    align-items: center;
  }

  &__left {
    justify-content: flex-start;
  }

  &__right {
    justify-content: flex-end;
  }

  &__back {
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 0;

    &-icon {
      font-size: 20px;
      color: var(--text-color);
      margin-right: 4px;
    }

    &-text {
      font-size: 16px;
      color: var(--text-color);
    }
  }

  &__center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
  }

  &__title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__right-text {
    font-size: 16px;
    color: var(--primary-color);
  }

  &__border {
    height: 1px;
    background-color: var(--border-color);
  }
}
</style>
